<!-- 提交申请 -->
<script lang="ts" setup>
import { ref, reactive, onMounted, h, watch } from 'vue'
import {
  NSpace,
  NButton,
  type FormInst,
  NForm,
  NFormItem,
  NInput,
  NProgress,
  type FormRules,
  useMessage,
  NScrollbar,
  NSpin,
  NDatePicker,
  NUpload,
  NDataTable,
  NPagination,
  NIcon,
  type DataTableColumns,
  NModal,
  type UploadFileInfo,
  NPopover
} from 'naive-ui'
import { sendRequest } from '@/utils/api'
import FixedAction from '@/components/FixedAction.vue'
import { keysOf } from '@/utils/object'
import VDialogContent from '@/views/OA/Common/DialogContent.vue'
import router from '@/router'
import { useRoute } from 'vue-router'
import { imgDefault, preUrlImg } from '@/utils/errordefaultImg'
import UploadFileV2 from '@/views/common/UploadFileV2.vue'
import TableView from '@/components/TableView.vue'
import { useThingStore } from '@/stores/addThing'
import VDisOrEnd from '@/views/OA/Common/DisOrEnd.vue'
import { ApprovalFilled, ErrorRound } from '@vicons/material'
import useRouteReplace from '@/hooks/useRouteReplace'
const props = defineProps({
  id: { type: String, default: () => null },
  typeShow: { type: Number, default: () => 0 },
  arr: { type: Array, default: () => 0 }
})
const route = useRoute()
const routeReplace = useRouteReplace(route.query.redirect as string)
const useInPutStore = useThingStore()
const rowKey: any = (row: any) => row.subItemCode || ''
const tableData: any = ref([])
const tableData1 = ref()
const message = useMessage()
const baseFormRef = ref<FormInst | null>(null)
const loading = ref(false)
const form: any = reactive({
  orderTypeCode: null,
  collectingOrderEnter: {
    //回库单
    enterDate: null, //入库日期
    fileIds: null,
    fileIdFiles: [], //附件
    humidity: null, // 保管相对湿度
    notes: null, //保管注意事项
    receiveUser: null, //接收人
    temperature: null, // 保管适宜温度
    transferUser: null //移交人
  },
  subItemCodeList: null //工单类型
})
const dataTrue: any = ref([])
const paginationReactive = reactive({
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 20, 50, 100, 500],
  itemCount: 0,
  onChange: (page: number) => {
    paginationReactive.page = page
    tableData.value = dataTrue.value?.slice(
      paginationReactive.pageSize * (paginationReactive.page - 1),
      paginationReactive.pageSize * (paginationReactive.page - 1) + paginationReactive.pageSize
    )
  },
  onUpdatePageSize: (pageSize: number) => {
    paginationReactive.pageSize = pageSize
    paginationReactive.page = 1
    tableData.value = dataTrue.value?.slice(0, pageSize)
  }
})
const handleUpdateFileList = (e: UploadFileInfo[], name: any) => {
  form[name].fileIdFiles = e
  // @ts-ignore
  form[name].fileIds = e.map((it) => it.file?.remoteId).join(',')
}
const columns: DataTableColumns = [
  {
    type: 'selection',
    width: '1rem'
  },
  {
    title: '序号',
    key: 'itemName',
    width: '5rem',
    align: 'center',
    render: (e: any, row: any) => {
      return 1 + (paginationReactive.page - 1) * paginationReactive.pageSize + row
    }
  },
  {
    title: '藏品名称',
    key: 'itemName',
    width: '5rem',
    align: 'center'
  },
  {
    title: '馆藏码',
    key: 'assetCode',
    width: '5rem',
    align: 'center'
  },
  {
    title: '流水号',
    key: 'serialNumber',
    width: '10rem',
    align: 'center'
  },
  {
    title: '版本类型',
    key: 'itemTypeName',
    width: '10rem',
    align: 'center'
  },
  {
    title: '入库位置',
    key: 'positionName',
    width: '10rem',
    align: 'center'
    // render: (e: any) => {
    //   return (
    //     (e.firstLevelName || '') +
    //     ' ' +
    //     (e.secondLevelName || '') +
    //     ' ' +
    //     (e.threeLevelName || '') +
    //     ' ' +
    //     (e.fourthLevelName || '') +
    //     ' ' +
    //     (e.fifthLevelName || '') +
    //     ' ' +
    //     (e.sixthLevelName || '')
    //   )
    // }
  },
  {
    title: '操作',
    key: 'action',
    width: '10rem',
    align: 'center',
    fixed: 'right',
    render: (e: any) => [
      h(
        NButton,
        {
          type: 'primary',
          quaternary: true,
          color: 'red',
          onClick: () => {
            deleteItemId.value = e.subItemCode
            modalVisible.value = true
          }
        },
        {
          default: () => '删除'
        }
      )
    ]
  }
]
const formRules: FormRules = {
  collectingOrderEnter: {
    //回库单
    enterDate: {
      required: true,
      trigger: ['blur', 'change'],
      type: 'any',
      message: '不能为空'
    }, //回库日期
    receiveUser: {
      required: true,
      trigger: ['blur', 'input'],
      type: 'any',
      message: '不能为空'
    }, //保管注意事项
    transferUser: {
      required: true,
      trigger: ['blur', 'input'],
      type: 'any',
      message: '不能为空'
    } //移交人
  }
}
const deleteItemId = ref() //删除id
const againDelete = async () => {
  let arr: any = []
  if (deleteItemId.value) {
    arr.push(deleteItemId.value)
  } else {
    arr = arr.concat(deleteId.value)
    deleteId.value = []
  }
  paginationReactive.pageSize = 10
  paginationReactive.page = 1
  dataTrue.value = dataTrue.value.filter((it: any) => !arr.includes(it.subItemCode))
  tableData.value = dataTrue.value?.slice(0, 10)
  paginationReactive.itemCount = dataTrue.value?.length
  modalVisible.value = false
}
const configData: any = ref([])
const otherConfigData: any = ref([])
const getOptionFn = async () => {
  const [error, res] = await sendRequest({
    module: 'collectProcess',
    api: 'countCollectingByType'
  })
  if (error) return message.error(error.message)
  configData.value = res?.data.slice(0, 9)
  otherConfigData.value = res.data?.slice(9)
}
const entityId = ref()

const submit = async () => {
  const validate = await Promise.all([
    new Promise((resolve, reject) => {
      baseFormRef.value?.validate((error) => {
        if (error) return reject(error)
        resolve(true)
      })
    })
  ])

  if (!validate.every(Boolean)) return
  loading.value = true
  const [error, res] = await sendRequest({
    module: 'collectProcess',
    api: 'collectingItemsStagingbatchUpdate',
    override: {
      data: {
        collectingOrderEnter: form.collectingOrderEnter,
        entityId: entityId.value,
        itemsStagingList: dataTrue.value,
        type: 2 //1初编 2编目
      }
    }
  })
  loading.value = false
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  message.success(res.msg)
  goBack()
}
// 字典下拉
const codeFn = async (code: any, refValue: any) => {
  const [error, res] = await sendRequest({
    module: 'collectProcess',
    api: 'listByParentCode',
    override: {
      params: {
        dicCode: code
      }
    }
  })
  if (error) return message.error(error.message)
  refValue.value = res?.data?.map((it: any) => {
    return { value: it.dicCode, label: it.dicName }
  })
  // if (code == 'A35') {
  //   form.orderTypeCode = res?.data?.[0]?.dicCode
  // }
}
//工单切换
const changeOrder = async (val: any) => {
  form.orderTypeCode = val
  console.log(val)
  getWorkFlow(val)
}

// 获取流程id
const hint = ref()
const workFlowList: any = ref()
const getWorkFlow = async (val: any) => {
  const [error, res] = await sendRequest({
    module: 'collectProcess',
    api: 'getWorkFlow',
    override: {
      params: {
        orderTypeCode: val
      }
    }
  })
  if (error) return
  if (res.code !== 0) return
  entityId.value = res.data.entityId
  hint.value = res.data.remark
  workFlowList.value = res.data.workFlowList?.map((it: any) => it).join(' → ')
}
// 返回
const goBack = () => {
  // history.back()
  routeReplace()
}
const statusList = ref()
const statusList31 = ref()
const statusList30 = ref()
const deleteId = ref()
const modalVisible = ref(false)
const rowKeysChange = (v: any) => {
  deleteId.value = v
}
const BatchDelete = () => {
  if (null == deleteId.value || deleteId.value.length === 0)
    return message.warning('请至少选择一项！')
  modalVisible.value = true
}
//下载
function download(headers: any, data: any, name?: string) {
  const val = headers['content-disposition']?.match(/(?<=filename=)(.*)/)
  let filename = val ? decodeURIComponent(val[0]) : name + '导出.xlsx'
  if (!filename.includes('xlsx')) {
    filename = filename.replace('xls', 'xlsx')
  }
  const a = document.createElement('a')
  let binaryData = []
  binaryData.push(data)
  a.href = window.URL.createObjectURL(new Blob(binaryData))
  a.download = filename
  a.click()
  window.URL.revokeObjectURL(a.href)
}
const exportLoading = ref(false)
async function handleDownload() {
  exportLoading.value = true
  const [error, res, headers] = await sendRequest({
    module: 'collectProcess',
    api: 'downloadFirstCatalogTemplate'
  })
  if (error) return message.error(error.message)
  download(headers, res)
  exportLoading.value = false
}
const percentage = ref(0)
const processVisible = ref(false)
const timer = ref<number | null>(null)
  const importErrorModalVisible = ref(false)
const importErrorMessage = ref('')
const importErrorExcelPath = ref('')
const isImportSuccess = ref(false)
const handleCancelImport = () => {
  importErrorModalVisible.value = false
}
const handleExport = () => {
  if (importErrorExcelPath.value) {
    const a = document.createElement('a')
    a.href = importErrorExcelPath.value
    a.download = '导入错误.xlsx'
    a.click()
  }
  importErrorModalVisible.value = false
}
const queryTableData = async (resetPage = false, file: any) => {
  if (resetPage) paginationReactive.page = 1
  processVisible.value = true
  const [error, res] = await sendRequest({
    module: 'collectProcess',
    api: 'collectItemStorageImportFile',
    override: {
      data: {
        excel: file,
        type: 2
      },
      onUploadProgress: (e: any) => {
        console.log(e.progress, e.loaded, e.total)
        const complete = Math.round((e.loaded * 100) / e.total)
        // percentage.value = Math.round((e.loaded * 100) / e.total)
        // 超过80 开始干涉
        if (complete >= 80) {
          if (timer.value) return
          timer.value = window.setInterval(() => {
            percentage.value += Math.round((100 - percentage.value) * 0.2) // 每次增加剩下的20%

            // 超过99 不再变化（此时也接近上传完成了）
            if (percentage.value > 99) {
              timer.value && window.clearInterval(timer.value)
            }
          }, 1000)
        } else {
          // 在80之前都按照axios计算出的进度来显示
          percentage.value = complete
        }
      }
    }
  })
  loading.value = false
  if (error) return message.error(error.message)
  percentage.value = 100
  // 100加载完成再关闭进度条
  setTimeout(() => {
    console.log('结束')
  }, 500)
  timer.value && window.clearInterval(timer.value)
  processVisible.value = false

  if (res.code !== 0) return message.error(res.msg)
  message.success(res.msg)
  let flag = false
  res.data?.items?.map((it: any) => {
    if (dataTrue.value.filter((i: any) => i.assetCode == it.assetCode).length == 0)
      dataTrue.value.push(it)
    else flag = true
  })
  if (flag) {
    message.error('列表中已存在征集品，请勿重复添加！')
  }
  isImportSuccess.value = res.data?.trueFlag
  importErrorMessage.value = res?.data.errorInfo||res?.msg
  importErrorExcelPath.value = res?.data.excelPath
  importErrorModalVisible.value = true
  // dataTrue.value = [...dataTrue.value, ...res.data]
  tableData.value = dataTrue.value?.slice(0, 10)
  paginationReactive.itemCount = dataTrue.value.length
}
async function handleUploadChange(fileList: UploadFileInfo[]) {
  form.file = fileList[fileList.length - 1]?.file
  queryTableData(false, fileList[fileList.length - 1]?.file)
}
// const add = () => {
//   router.push({
//     path: '/collection/process/pillManage/addInfoList',
//     query: {}
//   })
// }
const editId: any = ref()
watch(
  () => route.query?.arr,
  async () => {
    if (route.query?.arr) {
      let flag = false
      let dataArr = dataTrue.value
      useInPutStore.thingList.map((it: any) => {
        if (dataTrue.value.filter((i: any) => it.assetCode == i.assetCode).length == 0) {
          dataTrue.value.push(it)
        } else {
          flag = true
        }
      })
      if (flag) {
        message.error('列表中已存在征集品，请勿重复添加！')
      }
      editId.value = route.query?.id
      tableData.value = dataTrue.value?.slice(0, 10)
      paginationReactive.itemCount = dataTrue.value?.length
      // tableData.value=tableData.value.concat(useInPutStore.thingList)
      useInPutStore.thingList = []
    }
  },
  { deep: true, immediate: true }
)
const getDetail = async () => {
  await codeFn('A35', statusList) //审批清单 A35
  codeFn('A57', statusList31) //保护修复类型,关联字典A31
  codeFn('A36', statusList30) //去向,关联字典A36
  keysOf(form).forEach((e) => {
    if (e == 'orderTypeCode') return
    if (!form[e]) return
    keysOf(form[e])?.forEach((m) => {
      if (m == 'fileIdFiles') {
        form[e][m] = []
        return
      } else form[e][m] = null
    })
  })
  getOptionFn()
  if (useInPutStore.thingList) {
    let dataArr = dataTrue.value
    dataTrue.value = dataArr.concat(useInPutStore.thingList)
    editId.value = route.query.id
    tableData.value = dataTrue.value?.slice(0, 10)
    useInPutStore.thingList = []
  }
  // 修改回显
  if (route.query?.id) {
    sendRequest({
      module: 'collectProcess',
      api: 'orderBaseInfo',
      override: {
        params: {
          id: route.query?.id
        }
      }
    }).then(async ([err, res]) => {
      if (err) return
      getWorkFlow('A3508')
      tableData1.value = res.data?.workflowInfoVo?.approvalRecordsList || []
      keysOf(res.data).forEach((e) => {
        form[e] = res.data[e] as never
      })
    })
  }
}
const flat: any = ref(false)
watch(
  () => route.path,
  () => {
    if (route.path == '/collection/process/StepPlan/pillContent') {
      getDetail()
    }
    if (route.query.flat) flat.value = route.query.flat
  },
  { deep: true, immediate: true }
)

const dateDisabledBefore = (ts: any, data: any) => {
  if (data) {
    let time = new Date(data).getTime()
    return ts > time
  }
  return false
}
const dateDisabledAfter = (ts: number, data: any) => {
  let time = new Date(data).getTime()
  return ts < time - 86400000
}
onMounted(async () => {
  // await getDetail()
  await getWorkFlow('A3508')
})
</script>

<template>
  <DetailFormProvider>
    <div class="main">
      <div class="form_content">
        <NScrollbar>
          <NSpin :show="false">
            <div class="content">
              <div>
                <div class="topTitle">基本信息</div>
                <div
                  class="progressHint"
                  v-if="hint"
                >
                  <NIcon
                    size="20"
                    class="iconStyle"
                  >
                    <ErrorRound />
                  </NIcon>
                  <div
                    style="white-space: pre-wrap"
                    v-html="hint"
                  ></div>
                </div>
                <div class="progress">
                  <div style="display: flex; width: auto; padding: 0 15px">
                    <NIcon
                      :size="20"
                      class="iconStyle"
                    >
                      <ApprovalFilled />
                    </NIcon>
                    <span>审批流程</span>
                  </div>
                  <span
                    style="font-size: 18rem; flex: 1"
                    :style="{ color: !workFlowList ? 'red' : '#79bb92' }"
                  >
                    {{ workFlowList ? workFlowList : '暂无配置流程，请联系管理员进行配置' }}
                  </span>
                </div>
              </div>
              <VDisOrEnd
                v-if="flat"
                :id="form.workflowInfoVo?.fromId"
                :assigneeFlag="form.workflowInfoVo?.assigneeFlag"
                typeName="工单审批"
              ></VDisOrEnd>
              <div class="bd-content">
                <DetailFormProvider :disabled="editId === null && editId === undefined">
                  <!-- 出库单 1-->
                  <NForm
                    :model="form"
                    class="bd-card"
                    :rules="formRules"
                    ref="baseFormRef"
                    label-placement="left"
                    require-mark-placement="left"
                    label-width="140"
                    :disabled="editId"
                  >
                    <NSpace>
                      <NFormItem
                        label="入库日期："
                        path="collectingOrderEnter.enterDate"
                      >
                        <NDatePicker
                          placeholder="请选择入库日期"
                          type="date"
                          value-format="yyyy-MM-dd"
                          v-model:formatted-value="form.collectingOrderEnter.enterDate"
                          :input-readonly="true"
                          class="inputWH"
                          clearable
                        />
                      </NFormItem>
                      <NFormItem
                        label="移交人："
                        path="collectingOrderEnter.transferUser"
                      >
                        <NInput
                          placeholder="请输入移交人"
                          v-model:value="form.collectingOrderEnter.transferUser"
                          class="inputWH"
                        />
                      </NFormItem>
                      <NFormItem
                        label="接收人："
                        path="collectingOrderEnter.receiveUser"
                      >
                        <NInput
                          placeholder="请输入接收人"
                          v-model:value="form.collectingOrderEnter.receiveUser"
                          class="inputWH"
                        />
                      </NFormItem>
                    </NSpace>
                    <NSpace>
                      <NFormItem
                        label="保管适宜温度："
                        path="collectingOrderEnter.temperature"
                      >
                        <NInput
                          placeholder="请输入保管适宜温度"
                          v-model:value="form.collectingOrderEnter.temperature"
                          class="inputWH"
                        />
                      </NFormItem>
                      <NFormItem
                        label="保管相对湿度："
                        path="collectingOrderEnter.humidity"
                      >
                        <NInput
                          placeholder="请输入保管相对湿度"
                          v-model:value="form.collectingOrderEnter.humidity"
                          class="inputWH"
                        />
                      </NFormItem>
                      <NFormItem
                        label="保管注意事项："
                        path="collectingOrderEnter.notes"
                      >
                        <NInput
                          placeholder="请输入保管注意事项"
                          v-model:value="form.collectingOrderEnter.notes"
                          class="inputWH"
                        />
                      </NFormItem>
                    </NSpace>
                    <NSpace>
                      <NFormItem
                        label="备注："
                        path="collectingOrderEnter.remark"
                      >
                        <NInput
                          placeholder="请输入备注"
                          v-model:value="form.collectingOrderEnter.remark"
                          class="inputWH"
                        />
                      </NFormItem>
                      <NFormItem
                        label="附件："
                        path="collectingOrderEnter.fileIds"
                      >
                        <UploadFileV2
                          :file-list="form.collectingOrderEnter.fileIdFiles"
                          @update:file-list="(e: any) => handleUpdateFileList(e, 'collectingOrderEnter')"
                        >
                          <template #trigger="{ handleClick }">
                            <n-button
                              @click="handleClick"
                              color="#6CB187"
                              ghost
                              size="small"
                            >
                              点击上传
                            </n-button>
                          </template>
                        </UploadFileV2>
                        <!-- <NUpload style="padding-top: 5px">
                    <NButton
                      color="#6CB187"
                      ghost
                      size="small"
                    >
                      点击上传
                    </NButton>
                  </NUpload> -->
                      </NFormItem>
                    </NSpace>
                  </NForm>
                </DetailFormProvider>
              </div>
              <NSpace
                justify="space-between"
                style="margin-top: 20rem"
              >
                <div class="topTitle">藏品信息</div>
                <NSpace>
                  <NUpload
                    @update:file-list="handleUploadChange"
                    :show-file-list="false"
                  >
                    <NButton
                      type="warning"
                      style="width: 115px"
                      class="btnExport"
                    >
                      模板导入
                    </NButton>
                  </NUpload>
                  <NButton
                    type="warning"
                    style="width: 115px"
                    class="btnDownload"
                    @click="handleDownload"
                  >
                    模板下载
                  </NButton>
                  <!-- <NButton
                  type="primary"
                  style="width: 115px"
                  class="btnAdd"
                  @click="add"
                >
                  新增
                </NButton> -->
                  <NButton
                    tertiary
                    type="error"
                    style="width: 115px"
                    @click="BatchDelete"
                    v-if="!editId"
                  >
                    批量删除
                  </NButton>
                </NSpace>
              </NSpace>
              <div class="table">
                <NDataTable
                  v-bind="props"
                  :bordered="false"
                  :columns="columns"
                  :data="tableData"
                  :rowKey="rowKey"
                  :checked-row-keys="deleteId"
                  @update:checked-row-keys="rowKeysChange"
                />
              </div>
              <NPagination
                show-size-picker
                show-quick-jumper
                :page-sizes="paginationReactive.pageSizes"
                :item-count="paginationReactive.itemCount"
                :page="paginationReactive.page"
                :page-size="paginationReactive.pageSize"
                @update:page="paginationReactive.onChange"
                @update:page-size="paginationReactive.onUpdatePageSize"
                :suffix="() => '页'"
              >
                <template #prefix>
                  <span style="font-size: 14px">共{{ paginationReactive.itemCount }}条</span>
                </template>
              </NPagination>
              <NModal
                :auto-focus="false"
                v-model:show="modalVisible"
              >
                <VDialogContent
                  @close="modalVisible = false"
                  @submit="againDelete"
                  title="删除提示"
                >
                  <div
                    style="width: 300rem; height: 100rem; text-align: center; line-height: 100rem"
                  >
                    您确定要删除吗?
                  </div>
                </VDialogContent>
              </NModal>
            </div>
          </NSpin>
        </NScrollbar>
      </div>
      <NModal
        :auto-focus="false"
        :mask-closable="false"
        v-model:show="processVisible"
      >
        <n-progress
          type="line"
          style="width: 200px"
          status="success"
          :percentage="percentage"
        >
          {{ percentage }}%
        </n-progress>
      </NModal>
      
  <NModal
    :auto-focus="false"
    v-model:show="importErrorModalVisible"
  >
    <VDialogContent
      @close="handleCancelImport"
      @submit="handleExport"
      title="导入提示"
      submit-text="导出错误报告"
      close-text="确定"
      :submitVisible="!isImportSuccess"
    >
      <p style="max-width: 400rem">
        {{ importErrorMessage }}
      </p>
    </VDialogContent>
  </NModal>
    </div>
  </DetailFormProvider>
  <FixedAction>
    <NSpace justify="center">
      <NButton
        style="width: 78px"
        ghost
        @click="goBack"
      >
        {{ !editId ? '取消' : '关闭' }}
      </NButton>
      <NButton
        type="primary"
        style="width: 78px"
        @click="submit"
        :loading="loading"
      >
        确定
      </NButton>
    </NSpace>
  </FixedAction>
</template>

<style scoped lang="scss">
@mixin CommonFont {
  font-size: 15rem;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #333333;
}

.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .bd-card {
    padding: 20rem;
    background-color: #e1e1e1;
  }

  .link_content {
    width: 100%;
    display: flex;
    margin-bottom: 10rem;

    .link_item {
      width: 175rem;
      height: 68rem;
      background: #e6e6e6;
      border-radius: 6rem;
      border: 1rem solid #ececec;
      display: flex;
      align-items: center;
      padding-left: 5rem;
      text-decoration: none;
      color: initial;

      img {
        display: block;
        width: 35rem;
        height: 35rem;
        border-radius: 50%;
      }
    }
  }

  .link_item {
    width: 175rem;
    height: 68rem;
    background: #e6e6e6;
    border-radius: 6rem;
    border: 1rem solid #ececec;
    display: flex;
    align-items: center;
    padding-left: 5rem;
    text-decoration: none;
    color: initial;
  }

  img {
    display: block;
    width: 35rem;
    height: 35rem;
    border-radius: 50%;
  }

  .form_content {
    width: 100%;
    height: 100%;
    padding: 20rem 20rem 0;

    .topTitle {
      font-size: 22px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #5fb17f;
      margin-bottom: 10rem;
    }

    .inputWH {
      width: 300rem;
    }

    .inputWHmin {
      width: 150rem;
    }

    .content {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      padding: 18rem 33rem 120rem;
      overflow-y: scroll;
      background-color: #ebeceb;
      @include CommonFont;
    }
  }

  .approve {
    display: flex;
    width: 100%;
    margin-bottom: 20rem;
    border-bottom: 1px dashed #bc9e70;

    .box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-width: 100rem;
      width: auto;
      height: 90rem;
      border-radius: 4px;
      border: 1px solid #d9d9d9;
      padding: 12rem;
      margin-right: 10rem;
      margin-bottom: 20rem;

      span:first-child {
        font-size: 16rem;
      }

      span:last-child {
        font-weight: 500;
        color: #5fb17f;
      }
    }
  }

  .link_item2 {
    width: 155rem;
    height: 68rem;
    background: #e6e6e6;
    border-radius: 6rem;
    border: 1rem solid #ececec;
    display: flex;
    align-items: center;
    padding-left: 5rem;
    text-decoration: none;
    color: initial;
  }
}

.link_item1 {
  width: 155rem;
  height: 68rem;
  background: #e6e6e6;
  border-radius: 6rem;
  border: 1rem solid #ececec;
  display: flex;
  align-items: center;
  padding-left: 5rem;
  text-decoration: none;
  color: initial;
}

.content::-webkit-scrollbar {
  display: none;
}

:deep(.n-spin-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-content) {
  width: 100%;
  height: 100%;
}

:deep(.n-spin-content) {
  width: 100%;
  height: 100%;
}

//流程样式
.progress {
  width: 100%;
  min-height: 50rem;
  background-color: #d5e2d8;
  border-radius: 5rem;
  padding: 10rem;
  display: flex;
  align-items: center;
  margin-top: 10rem;
  margin-bottom: 10rem;
}
.progressHint {
  display: flex;
  width: 100%;
  padding: 5px 15px;
}
.iconStyle {
  margin-right: 5rem;
  color: #5fb17f;
}
</style>
